import Taro from '@tarojs/taro';
import {View, Image, Text, ScrollView} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {AtTabs, AtTabsPane} from 'taro-ui';
import {actionCreator} from "../../../store/actions";
import {appConfig, request} from '../../../utils/index';
import TopModal from "../../../components/top-modal/topModal";
import './courseList.scss';
import none from "../../../asset/images/none.png";
import Home from "../../../asset/images/home.png";
import search from '../../../asset/images/search_icon.png';
import Xinxin from '../../../asset/images/xinxin.png';
import SelectList from "../../../components/select-list/selectList";
import Go from "../../../asset/images/go.png";
import Gd from "../../../asset/images/gd.png";
import GdIn from "../../../asset/images/gd_in.png";

class TrainList extends Taro.Component {
    config = {
        navigationBarTitleText: '课程',
        backgroundColor: '#fff',
    };

    state = {
        mordIs: null,
        typeNameWrap: [], //类型数组
        classScaleId: -1, //团课规模ID
        classTypeId: -1, //课程类型ID
        periodId: -1, //时间段区间ID
        priceId: -1, //	价格区间ID
        regionId: 340102, //区域ID
        classDate: '',
        listData: [],
        regionStatus: 3,
        modelStatus: false,

        current: 0,
        getListLength: 0,
        quanIxStatus: false, //判断是否有筛选条件
    };

    componentDidMount() {
        const {getData, setClassDate} = this.props;
        const option = this.$router.params;
        console.log(option.classDate);
        this.setState({
            typeNameWrap: getData.classTypes,
            classTypeId: option.typeNameId || -1,
            classScaleId: option.classScaleId || -1,  //人数
            periodId: option.periodId || -1, //时间
            regionId: option.typeAreaId,
            regionStatus: option.regionStatusNext,
            priceId: option.moneyId,
            classDate: option.classDate || setClassDate,
        }, () => {
            this.getList() //列表
        });
    }

    //列表
    getList = () => {
        const {classScaleId, classTypeId, periodId, priceId, regionId, regionStatus, classDate} = this.state;
        const params = {
            url: '/wx/firstPage/getHotClassList',
            data:{
                classDate,
                classScaleId, //团课规模ID
                classTypeId: [classTypeId], //课程类型ID
                periodId, //时间段区间ID
                priceId, //价格区间ID
                regionId, //区域ID
                queryType: regionStatus == -1 ? 3 : 1
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    this.setState({
                        listData: res.data,
                        getListLength: res.data.length,
                    })
                }
            }
        })
    };

    getTypes = (item) => {
        console.log(item.regionStatus + 'zhao')
        const {regionId, priceId} = this.state;
        this.setState({
            classScaleId: Number(item.selectList) || -1, //1v1
            periodId: Number(item.tgTypeId) || -1, //时间段
            regionId: Number(item.regionId), //地区
            regionStatus: item.regionStatus,
            classTypeId: Number(item.classTypeId) ||-1, //课程类型
            priceId: Number(item.moneyId) || -1, //价格id
            quanIxStatus: item.quanIxStatus, //判断是否有筛选条件
            modelStatus: false,
        }, () => {
            this.setState({
                regionId: item.regionId || regionId,
            }, () => {
                this.getList() //获取课程列表
            })
        })
    };

    //跳转教练详情
    skipTrainDetail = (id) => {
        Taro.navigateTo({
            url: '../course-detail/courseDetail?id=' + id
        })
    };

    onChangeType = (name, res) => {
        const {typeNameWrap, classScaleId, periodId, priceId, regionId, setClassDate, classDate} = this.state;
        const {regionIds} = this.props;
        let nameId = '';
        if(name == 'typeName') {
            nameId = typeNameWrap[res].classTypeID;
            this.setState({
                classTypeId: nameId,
                quanIxStatus: (res == 0 && classScaleId == -1 && periodId == -1 && priceId == -1 && regionId == regionIds && classDate == setClassDate) ? false : true,
            }, () => {
                this.getList();
            });
        }
    };

    mordStatus = (is) => {
        const {mordIs} = this.state;
        this.setState({
            mordIs: is == mordIs ? null : is
        })
    };

    getTimers = (time, index) => {
        this.setState({
            classDate: time,
            current: index,
        }, () => {
            this.getList() //获取课程列表
        });
    };

    showModel = () => {
        this.setState(prevState => ({
            modelStatus: !prevState.modelStatus
        }))
    };

    tabsClick = (is) => {
        const {getData} = this.props;
        let timer = getData.weekDays;
        this.setState({
            current: is,
            classDate: timer[is].classDate
        }, () => {
            this.getList();
        });
    };

    //跳转课程详情
    skipCourseDetail = (classId, dispatchId, reservedStatus) => {
        Taro.navigateTo({
            url: '../course-detail/courseDetail?classId=' + classId + '&dispatchId=' + dispatchId + '&reservedStatus=' + reservedStatus,
        })
    };

    render() {
        const {
            listData, modelStatus, regionId, regionStatus, typeNameWrap,
            classTypeId, priceId, classScaleId, mordIs, current, classDate, getListLength,
            quanIxStatus, periodId
        } = this.state;
        const {getData} = this.props;
        return (
            <View className="page">
                <View className="course-head">
                    <View className="leixin-list-wrap flex-lr">
                        <View className="leixin-list">
                            {typeNameWrap.map((item, index) => (
                                <View className={`list-item ${(classTypeId == item.classTypeID) ? 'list-item-active' : ''}`} key={index} onClick={this.onChangeType.bind(this, 'typeName', index)}>
                                    {/*<Image className="leixin-item-img" src={classTypeId == item.classTypeID ? item.selectedAvatar : item.avatar}/>*/}
                                    <View>{item.classTypeName}</View>
                                    <View className={`${(classTypeId == item.classTypeID) ? 'list-active-heng' : ''}`}></View>
                                </View>
                            ))}
                        </View>
                        <View className={`leixin-Gd-wrap flex-center ${quanIxStatus ? 'leixin-Gd-wrap-in' : ''}`} onClick={this.showModel}>
                            <Image className="leixin-Gd-img" src={quanIxStatus ? GdIn : Gd}/>
                            <View>筛选</View>
                        </View>
                    </View>
                    <View className="keep-content-list">
                        <SelectList getClassDate={classDate} onTimer={this.getTimers}/>
                    </View>
                </View>
                <View className="keep-contents-wrap" style='padding-top:96px;'>
                    <AtTabs className="com-tabs" current={current} tabList={getData.weekDays} onClick={this.tabsClick.bind(this)}>
                        {getData.length != 0 && getData.weekDays.map((va, ixs) => (
                            <AtTabsPane current={current} key={ixs} index={ixs+1} >
                                <ScrollView
                                    className="content-view"
                                    scrollY
                                >
                                    {listData && listData.map((item, index) => (
                                        <View className={`keep-contents ${(Number(getListLength) -1) === index ? 'keep-contents-db' : ''}`} key={index}>
                                            <View className="keep-heads">
                                                <View className="keep-head-tops" onClick={this.skipClassRoomDetail.bind(this, item.roomId,item.avatar,item.roomName,item.address,item.latitude, item.longitude)}>
                                                    <View className="flex-l">
                                                        <Image className="keep-img" src={item.avatar}/>
                                                        <View>{item.roomName}</View>
                                                    </View>
                                                    {/*<View className="keep-head-bt">*/}
                                                    {/*    <View>{item.roomName}</View>*/}
                                                    {/*    <View className="text-address text-overflow">{item.address}</View>*/}
                                                    {/*</View>*/}
                                                    <View className="keep-head-more flex-r" onClick={this.goToMap.bind(this, item.roomName,item.address,item.latitude, item.longitude)}>
                                                        <Image className="icon-img" src={Go}/>
                                                        <View>去这里</View>
                                                    </View>
                                                </View>
                                                <View className={`keep-content ${index == mordIs ? 'keep-content-height' : ''}`}>
                                                    {item.hotClasses && item.hotClasses.map((value, is) => (
                                                        <View className="keep-content-list-item" key={is} onClick={this.skipCourseDetail.bind(this, value.classId, value.dispatchId, value.reservedStatus)}>
                                                            <Image className="list-img" src={value.avatar}/>
                                                            <View className="list-centent-left-wrap">
                                                                <View className="list-centent">
                                                                    <View className="name">{value.className}</View>
                                                                    <View className="timer">{value.classBeginTime}-{value.classEndTime} <Text className="text">￥{value.price}/节</Text></View>
                                                                    <View className="type flex-l">
                                                                        <View className="list-top-left flex-center">{value.reservedInfo}</View>
                                                                        {value.labelNames.map((items, indexs) => (
                                                                            <View className="kepp-gg flex-center" key={indexs}>{items}</View>
                                                                        ))}
                                                                    </View>
                                                                </View>
                                                                <View className={`list-right-bt ${value.reservedStatus == 0 ? '' : 'list-right-bt-ym'}`}>{value.reservedStatus == 0 ? '预约' : '已约满'}</View>
                                                            </View>
                                                        </View>
                                                    ))}
                                                </View>
                                                {item.hotClasses.length >= 4 && (
                                                    <View className="jiazaigengduo flex-center" onClick={this.mordStatus.bind(this, index)}>{index == mordIs ? '收起' : '查看更多'}</View>
                                                )}
                                            </View>
                                        </View>
                                    ))}
                                    {listData && listData.length == 0 &&(
                                        <View className="none" style="margin-top: 100px;">
                                            <image src={none}/>
                                            <View>暂无数据</View>
                                        </View>
                                    )}
                                </ScrollView>
                            </AtTabsPane>
                        ))}
                    </AtTabs>
                </View>
                {modelStatus &&(
                    <TopModal
                        getClassTypeId={classTypeId} //类型id
                        getPriceId={priceId} //价格id
                        onClose={this.showModel}
                        getRegionId={regionId} //区域id
                        onRegionStatus={regionStatus}
                        getPeriodId={periodId}
                        getClassScaleId={classScaleId} //类型id 一对一  一对多
                        onExport={this.getTypes}
                    />
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {userToken,getData, setClassDate, regionIds} = state;
    return {
        userToken,
        getData,
        setClassDate,
        regionIds
    }
};

const mapDispatchToProps = {
    setUserToken: actionCreator.setUserToken,
};

export default connect(mapStateToProps, mapDispatchToProps)(TrainList);



